组件 v-model
双向绑定，Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏；之前手动 update。
<script setup>
const model = defineModel({ default: 0 }); // 有点react useState 样子了
function update() {
model.value++;
}
</script>
v-model 的参数
<MyComponent v-model:title="bookTitle" />
<!-- MyComponent.vue -->
<script setup>
const title = defineModel("title"); // 看上去很简单，但是当我们要处理对象，并对参数修改
</script>
<template>
<input type="text" v-model="title" />
</template>
可能就变成
<script setup>
const [model, modifiers] = defineModel({
set(value) {
if (modifiers.capitalize) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
return value;
},
});
</script>
在 react 中，直接 props，useState；总之跟不上 react 步伐，追加的功能要等别人有了才能模仿。